<template>
  <div id="userinfo">
    <!-- 头部导航 -->
    <van-nav-bar
      title="个人信息"
      right-text="保存"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="header">
      <van-image
        round
        width="60"
        height="60"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
      <p>点击修改头像</p>
    </div>
    <ul class="info">
      <li>
        <label for="">用户ID</label>
        <p>{{userinfomation.user_id}}</p>
      </li>
      <li>
        <label for="">昵称</label>
        <p>{{userinfomation.user_name}}</p>
      </li>
       <li>
        <label for="">用户电话</label>
        <p>{{userinfomation.user_mobile}}</p>
      </li>
      <li>
        <label for="">用户邮箱</label>
        <p>{{userinfomation.user_email}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "Userinfo",
  data() {
    return {
      userinfomation: "",
    };
  },
  async created() {
    const { data } = await this.$request.get(
      "/api/users/myinfo/" + this.userinfo.user_name,
      {
        headers: {
          authorization: "auth_token",
        },
      }
    );
    this.userinfomation=data.data
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
  },
  computed: {
    ...mapState("user", ["userinfo"]),
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
#userinfo{
    padding: 5px;
    box-sizing: border-box;
}
.header {
  width: 100%;
  margin-top: 50px;
  p {
    margin-top: 10px;
    font-size: 14px;
    color: #666;
  }
}
.info{
    margin-top: 30px;
    width: 100%;
    border-radius: 10px;
    background-color: #fafafa;
    li{
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        line-height: 50px;
        border-bottom: 2px solid #fff;
        padding:0 10px;
        box-sizing: border-box;
        label{
            width: 45%;
            text-align: left;
        }
        p{
            width: 55%;
            text-align: left;
        }
    }
}
</style>
